<template>
  <div class="app-container">
    <el-row :gutter="24">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-form ref="queryForm" :inline="true" :model="queryParams" label-width="68px">
          <!--          <el-form-item label="用户名称" prop="userName">-->
          <!--            <el-input-->
          <!--              v-model="queryParams.userName"-->
          <!--              clearable-->
          <!--              placeholder="请输入用户名称"-->
          <!--              size="small"-->
          <!--              style="width: 240px"-->
          <!--              @keyup.enter.native="handleQuery"-->
          <!--            />-->
          <!--          </el-form-item>-->

          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryParams.status"
              clearable
              placeholder="用户状态"
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="dict in statusOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="dateRange"
              end-placeholder="结束日期"
              range-separator="-"
              size="small"
              start-placeholder="开始日期"
              style="width: 240px"
              type="daterange"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" size="mini" type="cyan">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini">重置</el-button>
          </el-form-item>
        </el-form>

      </el-col>
    </el-row>
    <baidu-map class="bm-view" :center="{lng: 115.944517, lat: 38.943799}" :zoom="13"
               :scroll-wheel-zoom="true" ak="wqSWEzEusGT6RxylRnBj3iY7RI5u0Tqe">
      <Scale anchor="BMAP_ANCHOR_TOP_RIGHT"></Scale>
      <Geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></Geolocation>
      <bmmarker v-for="item in numberList" :position="{lng: item.longitude, lat: item.dimension}"
                @click="infoWindowOpen(item)">
        <InfoWindow :show="item.by1" @close="infoWindowClose(item)" @open="infoWindowOpen(item)">
          <p style='text-align:left;font-weight:800'>标题:{{ item.reportName }}</p>
          　　　　　　<p style='text-align:left;font-weight:0'>信息:{{ item.reportContent }}</p>
          <!--          <img src="../../../assets/image/profile.jpg" class="user-avator" alt/>-->
        </InfoWindow>
      </bmmarker>
    </baidu-map>
    <!--    <baidu-map class="bm-view" >-->
    <!--      <bm-view style="width: 100%; height:100px; flex: 1"></bm-view>-->
    <!--    </baidu-map>-->

    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="cancel">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="监管名称" prop="bankName">
          <el-input v-model="form.bankName" placeholder="请输入监管名称"/>
        </el-form-item>
        <el-form-item label="监管时间" prop="bankName">
          <el-input v-model="form.bankName" placeholder="请输入监管时间"/>
        </el-form-item>
        <el-form-item label="陪同人" prop="bankName">
          <el-input v-model="form.bankName" placeholder="请输入陪同人"/>
        </el-form-item>
        <el-form-item label="监管说明" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入监管说明"/>
        </el-form-item>
        <el-form-item label="监管结果" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入监管结果"/>
        </el-form-item>
        <el-form-item label="监管反馈" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入监管反馈"/>
        </el-form-item>
        <el-form-item label="附件" prop="by3">
          <el-upload
            class="avatar-uploader"
            :action="productFileAction"
            :file-list="fileList"
            list-type="picture-card"
            :before-upload="beforeUpload"
            :headers="headers"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="uploadSuccess"
            :on-exceed="masterFileMax"
            :limit=limit
            multiple
            accept="image/*"
            name="uploadfiles">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-input type="textarea" v-show="1==2" v-model="form.by3" placeholder="请输入附加"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import Scale from 'vue-baidu-map/components/controls/Scale.vue'
import Geolocation from 'vue-baidu-map/components/controls/Geolocation.vue'
import bmmarker from 'vue-baidu-map/components/overlays/Marker.vue'
import InfoWindow from 'vue-baidu-map/components/overlays/InfoWindow.vue'
import {getToken} from "@/utils/auth";
import {listSupervise} from "@/api/jdgl/supervise";

export default {
  components: {
    BaiduMap,
    Scale,
    Geolocation,
    bmmarker,
    InfoWindow
  },
  data() {
    return {
      markerPoint: {lng: 116.404, lat: 39.915},
      show: false,
      // 日期范围
      dateRange: [],
      // 状态数据字典
      statusOptions: [],
      queryParams: {},
      open: false,
      title: '',
      numberList: [],
      // 表单参数
      form: {},
      fileList: [],
      limit: 5,
      headers: {Authorization: 'Bearer ' + getToken()},
      productFileAction: process.env.VUE_APP_BASE_API + '/system/resource/profile/upload',
      imageTempList: [],
      imageList: "",
      productfileList: [],
      // 表单校验
      rules: {
        bankName: [
          {required: true, message: "标题不能为空", trigger: "blur"}
        ],
        remark: [
          {required: true, message: "意见不能为空", trigger: "blur"}
        ],
      }
    }
  },
  created() {
    this.getDicts('sys_normal_disable').then(response => {
      this.statusOptions = response.data
    })
    this.initMap()
  },
  methods: {
    handleRemove(file, fileList) {
      this.imageTempList = [];
      this.imageList = '';
      if (fileList.length < 1) {
        this.form1.by3 = "";
      }
      fileList.forEach(item => {

        if (item.url.indexOf("blob:") > -1) {
          let url = process.env.VUE_APP_BASE_API + item.response.data[0];
          let imageInfo = {name: file.name, url: url};
          this.imageTempList.push(imageInfo);
          if (this.imageList == "") {
            this.imageList = this.imageList + url;
            this.form1.by3 = this.imageList;
          } else {
            this.imageList = this.imageList + "," + url;
            this.form1.by3 = this.imageList;
          }
        } else {
          let url = item.url;
          let imageInfo = {name: item.name, url: url};
          this.imageTempList.push(imageInfo);
          if (this.imageList == "") {
            this.imageList = this.imageList + url;
            this.form1.by3 = this.imageList;
          } else {
            this.imageList = this.imageList + "," + url;
            this.form1.by3 = this.imageList;
          }
        }
      });
    },
    masterFileMax(files, fileList) {
      this.$message.warning(`最多只允许上传 ${this.limit} 个附件。`);
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeUpload(file) {
      // 图片显示前做一下判断
      let isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type);
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message.error('上传图片格式不对!');
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isJPG && isLt5M;
    },
    uploadSuccess(response, file, fileList) {
      if (response.code == 200) {
        let url = process.env.VUE_APP_BASE_API + response.data[0];
        let imageInfo = {name: file.name, url: url};
        this.imageTempList.push(imageInfo);
        if (this.imageList == "") {
          this.imageList = this.imageList + url;
          this.form1.by3 = this.imageList;
        } else {
          this.imageList = this.imageList + "," + url;
          this.form1.by3 = this.imageList;
        }
        this.timer = setInterval(this.getImageList(fileList), 500);
      } else {
        this.$message.error(response.msg)
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            // updateNumber(this.form).then(response => {
            //   this.msgSuccess("修改成功");
            //   this.open = false;
            //   this.getList();
            // });
          } else {
          }
        }
      });
    },
    clickHandler(e) {
      this.open = true;
      this.title = '新增监督信息';
      let self = this;
      // self.msgSuccess(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
      // alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
      /* this.$confirm('确认添加标注?', "警告", {
         cancelButtonClass: 'btn-custom-cancel',
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
       }).then(function () {
         self.msgSuccess(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
       });*/
    },
    initMap() {
      listSupervise(this.queryParams).then(response => {
        this.numberList = response.rows;
      });
    },
    infoWindowClose(item) {
      item.by1 = false
    },
    infoWindowOpen(item) {

      item.by1 = true;
    }

  }
}
</script>
<style>
.bm-view {
  width: 100%;
  height: 700px;
}
</style>
